<template>
	<view class="activityBox">
		<div class="activityLi" v-for="(item, index) in activityList" :key="index">
			<navigator hover-class="none" @click="imageUrl(item.activityId)" open-type="navigate">
				<image :src="item.activityPic" center></image>
				<h3>{{ item.activityName }}</h3>
				<!-- <h5>活动时间：{{item.timeAddressList.activityTime}}</h5> -->
				<!-- <h5>活动地点：{{item.timeAddressList.activityAddress}}</h5> -->
			</navigator>
			<view class="attention">
				<uni-icons @click="changeCheck(item.isCheck)" class="attentionIcon" v-if="item.isCheck == 0" color="rgba(178, 177, 174, 1)" type="heart" size="18"></uni-icons>
				<uni-icons
					@click="changeCheck(item.isCheck)"
					class="attentionIcon"
					v-if="item.isCheck == 1"
					color="rgba(178, 177, 174, 1)"
					type="heart-filled"
					size="18"
				></uni-icons>
				<text class="attentionText">{{ item.attention }}</text>
			</view>
		</div>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons
	},
	name: 'ActivityList',
	props: {
		activityList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods: {
		changeCheck(isCheck) {
			uni.showToast({
				title: `${isCheck ? '取消' : '已'}关注`,
				duration: 2000
			});
		},
		imageUrl(activityId) {
			uni.navigateTo({
				url: '../info/index?activityId=' + activityId,
				animationType: 'pop-in',
				animationDuration: 200
			});
		}
	}
};
</script>

<style>
.activityBox {
	padding-bottom: 20rpx;
}

.attention {
	display: flex;
	justify-content: flex-end;
	padding: 0 20rpx 32rpx;
	color: rgba(178, 177, 174, 1);
	align-items: center;
}

.attentionIcon {
	margin-right: 14rpx;
}

.attentionText {
	font-size: 24rpx;
}

.activityLi image {
	border-radius: 12rpx 12rpx 0 0;
	width: 670rpx;
	height: 210rpx;
	margin-bottom: 20rpx;
}

.activityLi h3 {
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(102, 100, 93, 1);
	line-height: 42rpx;
	margin-bottom: 12rpx;
	padding: 0 20rpx;
}

.activityLi h5 {
	font-size: 26rpx;
	font-weight: 400;
	color: rgba(138, 140, 141, 1);
	margin-bottom: 12rpx;
	line-height: 40rpx;
	padding: 0 20rpx;
}

.activityLi {
	margin: 24rpx 40rpx 0;
	border-radius: 12rpx;
	background: #ffffff;
}
</style>
